<template>
	<a-modal :confirm-loading="handing" width="540px" v-model:open="showForm" @ok="submit">
		<a-form ref="form" :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 16, offset: 1 }">
			<a-form-item name="name" label="题库名称">
				<a-input v-model:value="formData.name" />
			</a-form-item>
			<a-form-item name="level" label="类型">
				<a-radio-group v-model:value="formData.level">
					<a-radio :value="1">初级</a-radio>
					<a-radio :value="2">中级</a-radio>
					<a-radio :value="3">高级</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item name="year" label="年份">
				<a-date-picker v-model:value="formData.year" picker="year" valueFormat="string" />
			</a-form-item>
			<a-form-item name="status" label="状态">
				<a-radio-group v-model:value="formData.status">
					<a-radio v-for="(v, i) in statuses" :value="i+1">{{v}}</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import {page, form} from "@/mixins"

export default {
	mixins: [page, form],
	data() {
		return {
			showForm: false as boolean,
			formPath: 'ques-bank',
			formData: {
				id: undefined,
				name: '',
				year: '',
				level: 1,
				status: 2
			},
			rules: {
			  name: [{ required: true, trigger: 'change' }],
			  status: [{ type: 'number', min: 1, trigger: 'change', message: '请选择题目类型' }],
			  level: [{ required: true, trigger: 'change', message: '请选择类型' }],
			  year: [{ required: true, trigger: 'change', message: '请选择年份' }]
			},
			statuses: ['正常','关闭']
		}
	},
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				name: '',
				year: '',
				level: 1,
				status: 2
			})
			this.showForm = true;
		},
		edit(record : object) {
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		}
	}
}
</script>